{extend name="common/base" /}
{block name="title"}购买下载加速特权-<?=$software['name']?>{/block}
{block name="head"}
<style>
    .list-group-item {
        text-decoration: none!important;
    }
    #qrcode-money {
        font-size: 2rem;
    }
</style>
{/block}
{block name="body"}
<div class="container" style="margin-top: 65px;">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="<?=url('Index/index')?>">首页</a></li>
            <li class="breadcrumb-item"><a href="<?=url('Software/info', ['id' => $software['id']])?>"><?=$software['name']?></a></li>
            <li class="breadcrumb-item active" aria-current="page">下载加速特权</li>
        </ol>
    </nav>
    <?php switch($payStatus): ?>
    <?php case 0: ?><div class="alert alert-danger">尚未购买《下载加速特权》，不能使用该下载点。</div><?php break; ?>
    <?php case 2: ?><div class="alert alert-danger">《下载加速特权》尚未完成未支付，不能使用该下载点。</div><?php break; ?>
    <?php case 3: ?><div class="alert alert-danger">《下载加速特权》已失效，不能使用该下载点，请重新购买。</div><?php break; ?>
    <?php endswitch; ?>
    <div class="row">
        <div class="col-xs-12 col-md-6">
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="pay-tab" data-bs-toggle="tab" data-bs-target="#pay" type="button" role="tab" aria-controls="pay" aria-selected="true">支付</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="recover-tab" data-bs-toggle="tab" data-bs-target="#recover" type="button" role="tab" aria-controls="recover" aria-selected="false">补单</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="refund-tab" data-bs-toggle="tab" data-bs-target="#refund" type="button" role="tab" aria-controls="refund" aria-selected="false">退款</button>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane fade show active pt-3" id="pay" role="tabpanel" aria-labelledby="pay-tab">
                    <form id="pay-form">
                        <input type="hidden" name="software_id" value="<?=$software->id?>">
                        <div class="mb-3">
                            <div class="input-group">
                                <label for="inputPhone" class="input-group-text">手机号</label>
                                <input type="text" class="form-control" name="phone" id="inputPhone" aria-describedby="phoneHelp" placeholder="用于补单和退款时使用">
                                <button type="submit" class="btn btn-primary">生成支付</button>
                            </div>
                            <small id="phoneHelp" class="form-text">
                                为了方便您补单和退款，推荐使用手机号生成的支付二维码来支付。当然，这不是必填的。
                            </small>
                        </div>
                    </form>
                    <div class="text-center">
                        <img src="/public/static/img/alipay.png" class="d-none" id="qrcode-icon">
                        <a id="qrcode-img" href="javascript:" target="_blank"></a>
                        <div id="qrcode-money"></div>
                    </div>
                </div>
                <div class="tab-pane fade pt-3" id="recover" role="tabpanel" aria-labelledby="recover-tab">
                    <form id="recover-form">
                        <div class="input-group mb-3">
                            <label class="input-group-text" for="recover-phone">手机号</label>
                            <input type="text" class="form-control" id="recover-phone" placeholder="请输入支付时填写的手机号">
                        </div>
                        <div class="input-group mb-3">
                            <label class="input-group-text" for="recover-trade_no">订单号</label>
                            <input type="text" class="form-control" id="recover-trade_no" placeholder="请输入支付宝的订单号">
                        </div>
                        <div>
                            <button type="submit" class="btn btn-primary float-end">提交补单</button>
                            <p class="form-text">手机号和订单号只需要输入一个即可</p>
                        </div>
                    </form>
                </div>
                <div class="tab-pane fade" id="refund" role="tabpanel" aria-labelledby="refund-tab">
                    <a target="_blank" class="btn btn-info" href="https://chatbot.weixin.qq.com/webapp/m4i4nceU76an0SKnwIBHbetxe2JLy4?robotName=wampserver">申请退款</a>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-md-6">
            <h3 class="border-bottom pb-2 mb-3">付费提示</h3>
            <p>本站每月均需要向服务商支付服务器租用费及带宽费，为了网站长期稳定运行，网站提供了“特权下载通道”来补贴服务器开支。</p>
            <p>
                当然，并不是说不付费就下载不了。
                除了付费下载通道，本站还提供其它下载通道（如官网下载链接和本站搭建的其它下载点），您可以返回上一页选择免费的下载点进行下载，但下载速度相对没这么稳定。
            </p>
            <hr/>
            <p>
                请使用手机支付宝扫描二维码进行支付，如果是手机用户，可以直接点击二维码进行支付。
                付费后，在七天内可享受高速下载全站资源的特权，付费节点采用COS + CDN提供下载支持，比其它节点快3倍以上。
            </p>
            <p>如果付费后，对付费节点的下载速度或其它不满意，可在下载详情页里的“反馈”进行反馈，反馈内容需要包含您的支付订单号和退款理由，我们看到后将第一时间为您处理退款</p>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script src="/public/static/js/jquery-qrcode.js"></script>
<script>
    $(document).ready(function () {
        let monitorOrdersTimeout;
        getPayInfo();
        $('#pay-form').submit(function () {
            let phone = $('#inputPhone').val();
            if (!/^1\d{10}$/.test(phone)) {
                Swal.fire({
                    title: '提示',
                    html: '您未输入手机号或输入的手机号不正确。<br/>无法使用手机号进行补单，确定要继续支付吗？',
                    showCancelButton: true,
                    confirmButtonText: '继续',
                    cancelButtonText: `取消`,
                }).then((result) => {
                    if (result.isConfirmed) {
                        getPayInfo();
                    }
                })
            } else {
                getPayInfo(phone);
            }

            return false;
        });
        // 提交补单
        $('#recover-form').submit(function () {
            let phone = $('#recover-phone').val();
            let tradeNo = $('#recover-trade_no').val();
            let id;
            if (phone.length > 0) {
                if (!/^1\d{10}/.test(phone)) {
                    Swal.fire('', '手机号格式错误', 'error');
                    return false;
                }
                id = phone;
            } else if (tradeNo.length > 0) {
                id = tradeNo;
            } else {
                Swal.fire('', '手机号或订单号必须输入一个', 'error');
                return false;
            }

            Swal.showLoading();
            $.get("{:url('Alipay/checkStatus', [], false)}", {id:id}, function (data) {
                Swal.hideLoading();
                if (data.code) {
                    Swal.fire('', data.msg, 'error');
                } else {
                    Swal.fire({
                        title: '补单成功',
                        text: '将自动打开下载页面，若没弹出下载，可以点击下方按钮进行下载。',
                        showConfirmButton: true,
                        showDenyButton: true,
                        confirmButtonText: '返回详情页',
                        denyButtonText: `下载文件`,
                    }).then((result) => {
                        if (result.isConfirmed) {
                            location.href = "<?=url('Software/info', ['id' => $software['id']])?>";
                        } else if (result.isDenied) {
                            location.reload();
                        }
                    });
                    setTimeout(() => location.reload(), 3000);
                }
            });
            return false;
        });

        function getPayInfo(phone)
        {
            Swal.showLoading();
            $.get("<?=url('Alipay/index')?>", {phone:phone}, function (data) {
                Swal.hideLoading();
                if (data.code) {
                    Swal.fire('', data.msg, 'error');
                } else {
                    Toast.fire({icon: 'success', title: '获取支付信息成功'})
                    $('#qrcode-img').attr('href', data.data.qr_code).html('')
                        .qrcode({
                            mode: 4,
                            text: data.data.qr_code,
                            image: document.getElementById('qrcode-icon')
                        });
                    $('#qrcode-money').text('￥' + data.data.money + '元');

                    clearTimeout(monitorOrdersTimeout);
                    monitorOrders(data.data.out_trade_no);
                }
            });
        }

        async function monitorOrders(id)
        {
            let response = await fetch("{:url('Alipay/checkStatus', [], false)}?id=" + id, {
                method: 'GET'
                ,credentials: 'same-origin'
                ,headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
                .then(response => response.json())
                .then(function (result) {
                    return result;
                })
                .catch(function (error) {
                    Swal.fire('网络错误', error, 'error');
                    console.error(error);
                });

            if (response.code) {
                // 尚未支付
                monitorOrdersTimeout = setTimeout(() => monitorOrders(id), 1000);
            } else {
                Swal.fire({
                    title: '支付成功',
                    text: '将自动打开下载页面，若没弹出下载，可以点击下方按钮进行下载。',
                    showConfirmButton: true,
                    showDenyButton: true,
                    confirmButtonText: '返回详情页',
                    denyButtonText: `下载文件`,
                }).then((result) => {
                    if (result.isConfirmed) {
                        location.href = "<?=url('Software/info', ['id' => $software['id']])?>";
                    } else if (result.isDenied) {
                        location.reload();
                    }
                });
                setTimeout(() => location.reload(), 3000);
            }
        }
    });
</script>
{/block}